<script>
import { ref, h, defineComponent, onMounted } from "vue";
import { NButton, NDivider, useMessage, useDialog } from "naive-ui";
import axios from "axios";
import { cloneDeep } from "lodash";
import dayjs from "dayjs";

const createColumns = ({ play, showProduct }) => {
  return [
    {
      title: "下单人",
      key: "userName",
      width: "100px",
      minWidth: 100,
    },
    {
      title: "下单人电话",
      key: "userPhone",
      minWidth: 100,
    },
    {
      title: "下单时间",
      key: "payTime",
      minWidth: 200,

      render(row) {
        return row.payTime && dayjs(row.payTime).format("YYYY-MM-DD HH:mm:ss");
      },
    },
    {
      title: "订单金额",
      key: "amount",
      minWidth: 100,
    },
    {
      title: "订单备注",
      key: "remark",
      width: "150px",
      minWidth: 150,
    },
    {
      title: "收货信息",
      key: "receive",
      width: "300px",
      minWidth: 200,

      render(row) {
        return [
          h(
            "div",
            {},
            {
              default: () =>
                row.orderAddress.name + "  " + row.orderAddress.phone,
            }
          ),
          h(
            "div",
            {},
            {
              default: () =>
                row.orderAddress.provinceText +
                "  " +
                row.orderAddress.cityText +
                "  " +
                row.orderAddress.areaText,
            }
          ),
          h(
            "div",
            {},
            {
              default: () => row.orderAddress.detail,
            }
          ),
        ];
      },
    },
    {
      title: "发货时间",
      key: "sendTime",
      minWidth: 200,

      render(row) {
        return (
          row.sendTime && dayjs(row.sendTime).format("YYYY-MM-DD HH:mm:ss")
        );
      },
    },
    {
      title: "商品信息",
      key: "productInfoList",
      minWidth: 200,

      render(row) {
        return [
          h(
            NButton,
            {
              text: true,
              tag: "a",
              type: "info",
              size: "small",
              onClick: () => showProduct(cloneDeep(row)),
            },
            { default: () => row.productInfoList.length }
          ),
        ];
      },
    },
    {
      title: "状态",
      key: "statusText",
      minWidth: 100,
      // fixed: "right",
    },
    {
      title: "操作",
      key: "actions",
      minWidth: 150,
      fixed: "right",
      render(row) {
        return [
          h(
            NButton,
            {
              text: true,
              tag: "a",
              type: "info",
              size: "small",
              onClick: () => play(cloneDeep(row)),
            },
            {
              default: () => {
                if (row.status === 1) {
                  return "发货";
                } else if (row.status === 5) {
                  return "退款";
                } else {
                  return "";
                }
              },
            }
          ),
        ];
      },
    },
  ];
};

export default defineComponent({
  setup() {
    const orderList = ref([]);
    const showModal = ref(false);
    const dialog = useDialog();
    const message = useMessage();
    const initQueryData = {
      userName: null,
      userPhone: null,
      status: null,
    };
    const queryData = ref(cloneDeep(initQueryData));
    const productData = ref([]);
    const statusOptions = [
      // 状态：1待发货，2待收货，3待评价，4已完成，5退款中，6已退款
      {
        label: "待发货",
        value: 1,
      },
      {
        label: "待收货",
        value: 2,
      },
      {
        label: "已完成",
        value: 4,
      },
    ];

    onMounted(() => {
      findList({});
    });

    function findList(queryData) {
      axios({
        method: "post",
        url: "/orderInfo/findList",
        data: queryData,
      }).then(function (response) {
        if (response.data.code === 200) {
          orderList.value = response.data.data;
        }
      });
    }

    return {
      orderList,
      queryData,
      statusOptions,
      showModal,
      productData,
      findList,
      columns: createColumns({
        play(row) {
          if (row.status === 1) {
            dialog.success({
              closable: false,
              showIcon: false,
              content: "确定已经发货了吗？",
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                axios({
                  method: "post",
                  url: "/orderInfo/sendOut",
                  params: {
                    id: row.id,
                  },
                }).then(function (response) {
                  if (response.data.code === 200) {
                    findList(queryData.value);
                    message.success("操作成功");
                  }
                });
              },
            });
          } else if (row.status === 5) {
            dialog.warning({
              closable: false,
              showIcon: false,
              content: "确定给用户退款吗？",
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                axios({
                  method: "post",
                  url: "/orderInfo/drawback",
                  params: {
                    id: row.id,
                  },
                }).then(function (response) {
                  if (response.data.code === 200) {
                    findList(queryData.value);
                    message.success("操作成功");
                  }
                });
              },
            });
          }
        },
        showProduct(row) {
          showModal.value = true;
          productData.value = row.productInfoList;
        },
      }),

      clear() {
        queryData.value = cloneDeep(initQueryData);
      },
    };
  },
});
</script>

<template>
  <n-form
    ref="formRef"
    inline
    label-placement="left"
    :model="queryData"
    class="formStyle"
  >
    <n-form-item label="下单人" path="userName">
      <n-input v-model:value="queryData.userName" placeholder="输入下单人" />
    </n-form-item>
    <n-form-item label="下单人电话" path="userPhone">
      <n-input v-model:value="queryData.userPhone" placeholder="输入电话" />
    </n-form-item>
    <n-form-item :span="12" label="状态" path="status">
      <n-select
        :clearable="true"
        v-model:value="queryData.status"
        placeholder="请选择"
        :options="statusOptions"
      />
    </n-form-item>
    <n-form-item>
      <n-button style="margin-left: 20px" @click="clear()"> 重置 </n-button>
      <n-button
        type="info"
        style="margin-left: 20px"
        @click="findList(queryData)"
      >
        查询
      </n-button>
    </n-form-item>
  </n-form>

  <n-data-table
    class="tableStyle"
    :columns="columns"
    :data="orderList"
    :pagination="true"
    :bordered="true"
    :scroll-x="1800"
  />

  <n-modal
    v-model:show="showModal"
    :mask-closable="true"
    preset="dialog"
    :show-icon="false"
    :closable="false"
    style="max-height: 600px; overflow-y: scroll"
  >
    <div v-for="item in productData">
      <div style="display: flex">
        <img
          :src="item.mainPicture.split('|')[0]"
          style="width: 60px; height: 60px"
        />
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 0px 0px 14px;
          "
        >
          <div>{{ item.name }}</div>
          <div style="color: #7a7a7a">
            单价：{{ item.actualPrice / item.quantity
            }}<n-divider vertical />数量：{{ item.quantity
            }}<n-divider vertical />实付：{{ item.actualPrice }}
          </div>
        </div>
      </div>
      <n-divider />
    </div>
  </n-modal>
</template>

<style>
.tableStyle {
  margin-left: 20px;
  width: 94%;
}

.formStyle {
  margin: 40px 0px 0px 30px;
}

.n-form.n-form--inline .n-form-item {
  width: 100%;
  margin-right: 18px;
}
</style>
